<!-----------start-pricing----------->
<div class="pricing-plans">
    <div class="wrap">
        <div class="pricing-grids">
            <div class="pricing-grid">
                <h3><a href="#">Basic</a></h3>
                <div class="price-value">
                    <a href="#">$5.01/month</a>
                </div>
                <ul>
                    <li><a href="#">Lorem ipsum</a></li>
                    <li><a href="#">Dolor sitamet, Consect</a></li>
                    <li><a href="#">Adipiscing elit</a></li>
                    <li><a href="#">Proin commodo turips</a></li>
                    <li><a href="#">Laws pulvinarvel</a></li>
                    <li><a href="#">Prnare nisi pretium</a></li>
                </ul>
                <div class="cart">
                    <a class="popup-with-zoom-anim" href="#small-dialog">Buy now</a>
                </div>
            </div>
            <div class="pricing-grid">
                <h3><a href="#">Pro</a></h3>
                <div class="price-value">
                    <a href="#">$10.01/month</a>
                </div>
                <ul>
                    <li><a href="#">Lorem ipsum</a></li>
                    <li><a href="#">Dolor sitamet, Consect</a></li>
                    <li><a href="#">Adipiscing elit</a></li>
                    <li><a href="#">Proin commodo turips</a></li>
                    <li><a href="#">Laws pulvinarvel</a></li>
                    <li><a href="#">Prnare nisi pretium</a></li>
                </ul>
                <div class="cart">
                    <a class="popup-with-zoom-anim" href="#small-dialog">Buy now</a>
                </div>
            </div>
            <div class="pricing-grid">
                <h3><a href="#">Premium</a></h3>
                <div class="price-value">
                    <a href="#">$20.01/month</a>
                </div>
                <ul>
                    <li><a href="#">Lorem ipsum</a></li>
                    <li><a href="#">Dolor sitamet, Consect</a></li>
                    <li><a href="#">Adipiscing elit</a></li>
                    <li><a href="#">Proin commodo turips</a></li>
                    <li><a href="#">Laws pulvinarvel</a></li>
                    <li><a href="#">Prnare nisi pretium</a></li>
                </ul>
                <div class="cart">
                    <a class="popup-with-zoom-anim" href="#small-dialog">Buy now</a>
                </div>
            </div>
            <div class="clear"> </div>
            <!-----pop-up-grid---->
            <div id="small-dialog" class="mfp-hide">
                <div class="pop_up">
                    <div class="payment-online-form-left">
                        <form>
                            <h4><span class="shipping"> </span>Shipping</h4>
                            <ul>
                                <li><input class="text-box-dark" type="text" value="Frist Name" onfocus="this.value = '';"></li>
                                <li><input class="text-box-dark" type="text" value="Last Name" onfocus="this.value = '';"></li>
                            </ul>
                            <ul>
                                <li><input class="text-box-dark" type="text" value="Email" onfocus="this.value = '';"></li>
                                <li><input class="text-box-dark" type="text" value="Company Name" onfocus="this.value = '';" ></li>
                            </ul>
                            <ul>
                                <li><input class="text-box-dark" type="text" value="Phone" onfocus="this.value = '';"></li>
                                <li><input class="text-box-dark" type="text" value="Address" onfocus="this.value = '';"></li>
                                <div class="clear"> </div>
                            </ul>
                            <div class="clear"> </div>
                            <ul class="payment-type">
                                <h4><span class="payment"> </span> Payments</h4>
                                <li><span class="col_checkbox">
													<input id="3" class="css-checkbox1" type="checkbox">
													<label for="3" name="demo_lbl_1" class="css-label1"> </label>
													<a class="visa" href="#"> </a>
													</span>

                                </li>
                                <li>
													<span class="col_checkbox">
														<input id="4" class="css-checkbox2" type="checkbox">
														<label for="4" name="demo_lbl_2" class="css-label2"> </label>
														<a class="paypal" href="#"> </a>
													</span>
                                </li>
                                <div class="clear"> </div>
                            </ul>
                            <ul>
                                <li><input class="text-box-dark" type="text" value="Card Number"></li>
                                <li><input class="text-box-dark" type="text" value="Name on card"></li>
                                <div class="clear"> </div>
                            </ul>
                            <ul>
                                <li><input class="text-box-light hasDatepicker" type="text" id="datepicker" value="Expiration Date" onfocus="this.value = '';"><em class="pay-date"> </em></li>
                                <li><input class="text-box-dark" type="text" value="Security Code" onfocus="this.value = '';"></li>
                                <div class="clear"> </div>
                            </ul>
                            <ul class="payment-sendbtns">
                                <li><input type="reset" value="Cancel"></li>
                                <li><input type="submit" value="Process order"></li>
                            </ul>
                            <div class="clear"> </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-----pop-up-grid---->
        </div>
        <div class="clear"> </div>
    </div>
</div>
</div>
<!-- Add fancyBox light-box -->
<script>
    $(document).ready(function() {
        $('.popup-with-zoom-anim').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });
    });
</script>
<!----End-pricingplans---->
<!-----------end-pricing------------->